<script setup lang="ts">
import { TIANDITU_TOKEN } from '@/config/global'
import { Cartesian3, UrlTemplateImageryProvider, Viewer } from 'cesium'
import { onMounted } from 'vue'

onMounted(() => {
  // 服务域名
  const tdtUrl = 'https://t{s}.tianditu.gov.cn/'
  // 服务负载子域
  const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']

  const viewer = new Viewer('cesiumContainer', {
    // 搜索按钮
    geocoder: false,
    // 主页按钮
    homeButton: false,
    // 投影按钮
    sceneModePicker: false,
    // 图层选择按钮
    baseLayerPicker: false,
    // 帮助按钮
    navigationHelpButton: false,
    // 动画控件
    animation: false,
    // 时间线控件
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // 去掉版本
    creditContainer: document.createElement('div'),
    // 去掉星空背景
    skyBox: false,
    baseLayer: false,
  })

  // 加载天地图影像底图
  const tiandituImageryProvider = new UrlTemplateImageryProvider({
    url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + TIANDITU_TOKEN,
    subdomains: subdomains,
  })
  viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)

  // 加载天地图影像注记
  // const tiandituImageryProvider = new UrlTemplateImageryProvider({
  //   url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + TIANDITU_TOKEN,
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)

  // 加载天地图矢量底图
  // const tiandituImageryProvider = new UrlTemplateImageryProvider({
  //   url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + TIANDITU_TOKEN,
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)

  // 加载天地图矢量注记
  // const tiandituImageryProvider2 = new UrlTemplateImageryProvider({
  //   url: tdtUrl + 'DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + TIANDITU_TOKEN,
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(tiandituImageryProvider2)

  // 加载天地图影像底图
  // const tiandituImageryProvider = new UrlTemplateImageryProvider({
  //   url:
  //     'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
  //     TIANDITU_TOKEN,
  // })
  // viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)


  // 视角转到中国
  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(103.84, 31.15, 17850000),
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped></style>
